<template>
  <div >
  <el-container>
  <el-header>
     <div id="header_left">
    特征筛选平台
    </div>
    <div id="header_right">
      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <el-menu-item index="1"> 首页</el-menu-item>

      <el-menu-item index="2" >我的提交</el-menu-item>
        <!-- <el-menu-item index="3" >成员介绍</el-menu-item>
        <el-menu-item index="4" >项目demo</el-menu-item>
        <el-menu-item index="5" >实用工具</el-menu-item>-->
      <el-menu-item index="6">登陆</el-menu-item>
      <el-menu-item index="7">管理员登陆</el-menu-item>
      </el-menu>

    </div>

    <div class="line"></div>
  </el-header>
  <el-divider></el-divider>
  <el-main>
    <div style=" width :50%;margin: auto;">
      <el-upload  class="upload-demo"
                  drag
                  :on-change="uploadImg"
                  action="http://localhost:8080/system/user/profile/uploadfile"
                  multiple>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">只能上传.csv文件，且不超过5mb，要求数据最后一列为标签列</div>
      </el-upload>
    </div>
    <!-- <index /> -->
<!--    <router-view/>-->

    <br>
    <br>
    <div>
      <fieldset>
        <el-form :model="dengmiQueryForm" ref="dengmiQueryForm" label-width="100px" class="demo-ruleForm" size="mini">
          <el-row>
            <el-col span="10" style="margin-left: 0px;">
              <el-form-item label="特征集名称">
                <el-input v-model="dengmiQueryForm.mimian"></el-input>
              </el-form-item>
            </el-col>
            <el-col span="10">
              <el-form-item>
                <el-button type="primary" @click="submitForm" icon="el-icon-search">提交</el-button>
                <el-button type="warning" @click="resetForm" icon="el-icon-search" plain>重置</el-button>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col span="10" style="margin-left: 0px;">
              <p>是否打印分类结果</p>
            </el-col>
            <el-col >
              <el-radio-group v-model="radio">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="2">否</el-radio>
              </el-radio-group>
            </el-col>
          </el-row>
          <br>
          <p>选择算法</p>
          <el-checkbox v-model="checked">灰色关联系数</el-checkbox>
          <el-checkbox >随机森林（RF）</el-checkbox>
          <el-checkbox >极端随机树（ET）</el-checkbox>
          <el-checkbox >梯度提升决策树（GBDT）</el-checkbox>
          <el-checkbox >卡方统计（CHI2）</el-checkbox>
          <el-checkbox >F统计（F）</el-checkbox>
          <el-checkbox >最大信息系数（MIC）</el-checkbox>
          <el-checkbox >费希尔判别法（Fisher）</el-checkbox>
          <el-checkbox >拉普拉斯（Laplacian）</el-checkbox>
          <el-checkbox >约束（Constraint）方法</el-checkbox>


        </el-form>
      </fieldset>
    </div>

  </el-main>
  <el-footer>

     <div id="copyright">
      Copyright ©️ 2022 cch. All Rights Reserved
    </div>


  </el-footer>
</el-container>

  </div>

</template>

<style scoped>
fieldset {
  /* 表单页面居中，宽度50% ,legend颜色设置，legend圆角*/
  border:0px solid #DCDFE6;  text-align:left; border-radius: 8px;margin: 0 auto;width:50%;
}
#header_left{
  float: left;
   color:cornflowerblue;
  font-size: 25px;
  font-weight: 800;
  text-transform: uppercase;/*大写*/
  position: absolute;
  top: 3%;
  left:15%;
}
#header_right{
  float: left;
  padding-left: 50%;

  /* left:45%; */

}

/* .el-menu{
  left: 45%;

} */
.el-menu-item {
   font-size: 18px;
}
#copyright{

  position: absolute;
  top: 95%;
  left: 38%;

}
</style>

<script>
import index from '@/components/index.vue'
import {uploadAvatar, uploadFeature} from "@/api/system/user";
  export default {
    data() {
      return {
        checked: true,
        activeIndex: '1',
        activeIndex2: '1',
        dengmiQueryForm: {
          mimian:'',
          mimu:'',
          mige:'',
          midi:'',
          zuozhe:'',
          midiLength:'',
          radio: '1'
        }
      };
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
        if(key==1){
          this.$router.push("/userindex")
        }else if(key==2){
          this.$router.push("/submit")
        }else if(key==3){
          this.$router.push("/members")
        }else if(key==4){
          this.$router.push("/project")
        }else if(key==5){
          this.$router.push("/util")
        }else if(key==6){
          this.$router.push("/userlogin")
        }else if(key==7){
          this.$router.push("/login")
        }
      },
      uploadImg(file) {
        console.log("cch",file)
          // let formData = new FormData();
          // formData.append("uploadfile", file);
        // uploadFeature().then(response => {
            // this.open = false;
            // this.options.img = process.env.VUE_APP_BASE_API + response.imgUrl;
            // store.commit('SET_AVATAR', this.options.img);
            // this.$modal.msgSuccess("修改成功");
            // this.visible = false;
          // });

      },
      // handleChange(file, fileLists) {
      //   console.log(fileLists);
      //   this.$axios({
      //     url: "http://localhost:8080/system/user/profile/uploadfile",
      //     method: "post",
      //     params:{
      //       "uploadfile":fileLists[0].name,
      //     }        })
      //     .then((res) => {
      //       if(res.data.flag==true){
      //       }
      //       // router.push('./adminhome')
      //     })
      //     .catch((err) => {
      //       console.log(err);
      //     });
      //   this.timer = setTimeout(()=>{   //设置延迟执行
      //     console.log('ok');
      //     // this.$router.push("/project")
      //   },15000);
      // },
    },

    components: {

    index
  }
  }

</script>
